<template>
  <div class="main-box">
    <el-button
      type="primary"
      icon="el-icon-plus"
      style="margin-bottom: 16px"
      @click="add"
    >
      {{ $t('添加岗位') }}
    </el-button>
    <BaseTable :request="request" ref="baseTable">
      <!-- <el-table-column label="ID" width="80px" prop="id" /> -->
      <el-table-column :label="$t('岗位名称')" prop="title" />
      <el-table-column :label="$t('岗位分类')" prop="jobCate">
        <template slot-scope="scope">
          <span v-if="scope.row.jobCate">{{ scope.row.jobCate.title }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('城市')" prop="jobCity">
        <template slot-scope="scope">
          <span v-if="scope.row.jobCity">{{ scope.row.jobCity.title }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('职位要求')" prop="demand">
        <template slot-scope="scope">
          <el-popover
            placement="top-start"
            title=""
            width="fit-content"
            trigger="click"
          >
            <el-input
              readonly
              class="descTip"
              type="textarea"
              v-model="scope.row.demand"
            ></el-input>
            <span slot="reference" class="descTitle">
              {{ scope.row.demand }}
            </span>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column :label="$t('工作内容')" prop="duty">
        <template slot-scope="scope">
          <el-popover
            placement="top-start"
            title=""
            width="fit-content"
            trigger="click"
          >
            <el-input
              readonly
              class="descTip"
              type="textarea"
              v-model="scope.row.duty"
            ></el-input>
            <span slot="reference" class="descTitle">
              {{ scope.row.duty }}
            </span>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column :label="$t('岗位描述')" prop="description">
        <template slot-scope="scope">
          <el-popover
            placement="top-start"
            title=""
            width="fit-content"
            trigger="click"
          >
            <el-input
              readonly
              class="descTip"
              type="textarea"
              v-model="scope.row.description"
            ></el-input>
            <span slot="reference" class="descTitle">
              {{ scope.row.description }}
            </span>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column :label="$t('工资')" prop="salary" width="120px" />
      <el-table-column :label="$t('收件箱')" prop="email" />
      <el-table-column :label="$t('发布日期')" prop="schedule" />
      <el-table-column
        :label="$t('操作')"
        width="100px"
        fixed="right"
        align="right"
      >
        <template slot-scope="scope">
          <EditBtn @click="edit(scope.row)" />
          <DelBtn @success="del(scope.row)" />
        </template>
      </el-table-column>
    </BaseTable>

    <BaseDialog
      :title="addForm.id ? this.$t('编辑') : this.$t('添加')"
      :dialog-show.sync="dialogShow"
      width="50%"
      class="inner"
      footer
      @submit="submit"
    >
      <el-form
        ref="addForm"
        :model="addForm"
        :rules="rules"
        class="addForm"
        label-position="top"
      >
        <el-form-item :label="`${$t('发布站点')}:`" prop="website_id">
          <el-select v-model="addForm.website_id">
            <el-option
              v-for="item in website"
              :key="item.id"
              :label="item.domain"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="`${$t('岗位名称')}:`" prop="title">
          <el-input
            v-model="addForm.title"
            :placeholder="$t('请输入岗位名称')"
          />
        </el-form-item>
        <el-form-item :label="`${$t('职位要求')}:`" prop="demand">
          <el-input
            v-model="addForm.demand"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            :placeholder="$t('请输入职位要求')"
          />
        </el-form-item>
        <el-form-item :label="`${$t('工资')}:`" prop="salary">
          <el-input
            v-model="addForm.salary"
            :placeholder="$t('请输入岗位工资')"
          />
        </el-form-item>
        <el-form-item :label="`${$t('岗位分类')}:`">
          <el-select
            v-model="addForm.job_cate_id"
            :placeholder="$t('请选择岗位分类')"
          >
            <el-option
              v-for="item in cate"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="`${$t('工作城市')}:`">
          <el-select
            v-model="addForm.job_city_id"
            :placeholder="$t('请选择工作城市')"
          >
            <el-option
              v-for="item in city"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="`${$t('发布日期')}:`">
          <el-date-picker
            v-model="addForm.schedule"
            type="date"
            :placeholder="$t('请选择日期')"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item :label="`${$t('收件箱')}:`" prop="email">
          <el-input v-model="addForm.email" :placeholder="$t('请输入收件箱')" />
        </el-form-item>

        <el-form-item :label="`${$t('工作内容')}:`" prop="duty">
          <el-input
            v-model="addForm.duty"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            :placeholder="$t('请输入工作内容')"
          />
        </el-form-item>
        <el-form-item :label="`${$t('岗位描述')}:`">
          <el-input
            v-model="addForm.description"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            :placeholder="$t('请输入岗位描述')"
          />
        </el-form-item>
      </el-form>
    </BaseDialog>
  </div>
</template>

<script>
import jobApi from '@/api/job.js'
import websiteApi from '@/api/website'
export default {
  data() {
    return {
      request: jobApi.jobList,
      jobList: [],
      addForm: {
        title: '',
        job_cate_id: '',
        job_city_id: '',
        description: '',
        duty: '',
        demand: '',
        schedule: '',
        email: '',
        salary: '',
        website_id: '',
        id: ''
      },
      rules: {
        website_id: [
          {
            required: 'true',
            message: this.$t('请选择站点'),
            trigger: 'change'
          }
        ],
        title: [
          {
            required: 'true',
            message: this.$t('请输入岗位名称'),
            trigger: 'blur'
          }
        ],
        demand: [
          {
            required: 'true',
            message: this.$t('请输入职位要求'),
            trigger: 'blur'
          }
        ]
      },
      dialogShow: false,
      city: [], // 城市
      cate: [], // 岗位分类
      website: [], // 站点
      siteId: ''
    }
  },
  computed: {
    siteId1() {
      return this.$store.getters.siteId
    }
  },
  watch: {
    siteId1(val, value) {
      this.siteId = val
      this.addForm.website_id = val
    }
  },
  created() {
    // this.addForm.website_id = this.$store.getters.siteId
    this.getCity()
    this.getJobCate()
    this.getWebsite()
  },
  methods: {
    // 站点列表
    getWebsite() {
      websiteApi.websiteList().then(res => {
        this.website = res.data
      })
    },
    // 城市列表
    getCity() {
      jobApi.jobCityList().then(res => {
        this.city = res.data
      })
    },
    // 岗位分类列表
    getJobCate() {
      jobApi.jobCateList().then(res => {
        this.cate = res.data
      })
    },
    //   岗位列表
    getList() {
      const val = {
        page: this.page.currentPage,
        limit: this.page.size
      }
      jobApi.jobList(val).then(res => {
        this.jobList = res.data
        this.page.total = res.count
      })
    },
    // 添加
    add() {
      this.addForm.id = ''
      this.addForm = {
        title: '',
        job_cate_id: '',
        job_city_id: '',
        description: '',
        duty: '',
        demand: '',
        schedule: '',
        email: '',
        salary: '',
        website_id: this.$store.getters.siteId
      }
      this.dialogShow = true
    },
    // 编辑
    edit(row) {
      this.addForm.id = row.id
      this.getJobInfo(row)
      this.dialogShow = true
    },
    // 岗位详情
    getJobInfo(val) {
      jobApi.jobInfo({ id: val.id, website_id: val.website_id }).then(res => {
        this.addForm = res.data
      })
    },
    // 提交
    submit() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          if (!this.addForm.id) {
            jobApi.jobSave({ ...this.addForm }).then(res => {
              if (res.code == 0) {
                this.$message.success(res.msg)
                this.dialogShow = false
                this.$refs.baseTable.getList('search')
              }
            })
          } else {
            const val = {
              title: this.addForm.title,
              job_cate_id: this.addForm.job_cate_id,
              job_city_id: this.addForm.job_city_id,
              description: this.addForm.description,
              duty: this.addForm.duty,
              demand: this.addForm.demand,
              schedule: this.addForm.schedule,
              email: this.addForm.email,
              salary: this.addForm.salary,
              website_id: this.addForm.website_id,
              id: this.addForm.id
            }
            jobApi.jobUpdate(val).then(res => {
              if (res.code == 0) {
                this.$message.success(res.msg)
                this.dialogShow = false
                this.$refs.baseTable.getList()
              }
            })
          }
        } else {
          this.$message.error(this.$t('请填写必要信息'))
        }
      })
    },
    // 删除
    del(row) {
      jobApi.jobDelete({ id: row.id }).then(res => {
        if (res.code == 0) {
          this.$message.success(res.msg)
          this.$refs.baseTable.getList('search')
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.addForm {
  .el-form-item {
    width: 100%;
  }
  .el-form-item__content {
    width: 100%;
    .el-select,
    .el-date-editor {
      width: 100%;
    }
  }
}
.descTitle {
  display: inline-block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
}
.descTip {
  ::v-deep .el-textarea__inner {
    resize: auto;
  }
  /*滚动条样式*/
  ::v-deep textarea::-webkit-scrollbar {
    width: 4px;
  }
  ::v-deep textarea::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: rgba(0, 0, 0, 0.2);
  }
  ::v-deep textarea::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    background: rgba(0, 0, 0, 0.1);
  }
}
</style>
